import React, { Component } from 'react'

import './02-style.css'

export default class App extends Component {

  //类组件中定义状态的方法--------------vue 中 的 data
  //state 是固定写法,在其内部可以定义一些初始数据
  state = {
    flag:false
  }

  render() {
    return (
      <div className={this.state.flag ? 'active' : 'box'} onClick={()=>{
        // console.log(this);
        //在 react 中无法直接修改值,因为 react 有专门修改数据的方法
        //类似于 vuex 只能通过一个方法来进行改变
        // this.state.flag=!this.state.flag

        //setState 是 react 中唯一修改数据的方法,微信小程序也是只能有一个修改数据的方法
        //取反 this.state.flag 然后将取反之后的值设置在 flag 中
        this.setState({
          flag:!this.state.flag
        })
        // setInterval(() => {
        //   this.setState({
        //     flag:!this.state.flag
        //   })
        // }, 1000);
      }}>App</div>
    )
  }
}
